<template>
  <view class="content">
    <view class="content-heard">
      <view class="heard-item" v-if="info">
        <view class="user-image">
          <image 
            v-if="info.avatar_url" 
            class="user-image-box" 
            :src="info.avatar_url"
            mode="" 
          ></image>
        </view>
        <view class="user-name">
          <text>{{dayType}}好,{{ info.nickname }}</text>
          <view @click="pathInfo('/pages/userInfo/userInfo')" class="path-info"
            >编辑个人信息</view
          >
        </view>
      </view>
      <view class="login-btn" @click="loginOut">
        <text>退出 </text>
        <image src="@/static/loginout.png" mode=""></image>
      </view>
    </view>
    <view class="tab-list">
      <view
        class="tab-item"
        @click="pathItem(item)"
        v-for="(item, index) in tabList"
        :key="index"
        :class="{ 'no-mg': index === 9 }"
      >
        <view class="tab-item-image">
          <image
            class="tab-url"
            src="@/static/tabIcon1.png"
            v-if="index === 0"
          ></image>
          <image 
            class="tab-url"
            src="@/static/tabIcon2.png"
            v-else-if="index === 1"
          ></image>
          <image
            class="tab-url"
            src="@/static/tabIcon3.png"
            v-else-if="index === 2"
          ></image>
          <image
            class="tab-url"
            src="@/static/tabIcon4.png"
            v-else-if="index === 3"
          ></image>
          <image
            class="tab-url"
            src="@/static/tabIcon5.png"
            v-else-if="index === 4"
          ></image>
          <image
            class="tab-url"
            src="@/static/tabIcon6.png"
            v-else-if="index === 5"
          ></image>
          <image
            class="tab-url"
            src="@/static/tabIcon7.png"
            v-else-if="index === 6"
          ></image>
          <image
		   mode=""
            class="tab-url"
            src="@/static/tabIcon7.png"
            v-else-if="index === 7"
          ></image> 
          <image
		   mode=""
            class="tab-url"
            src="@/static/tabIcon9.png"
            v-else-if="index === 8"
          ></image>
          <image
		   mode=""
            class="tab-url"
            src="@/static/tabIcon10.png"
            v-else-if="index === 9"
          ></image>
		 
        </view>
        <text>{{ item.title }}</text>
      </view>
    </view>
    <view class="bottom" v-if="info">
      <view class="bottom-item">
        <view class="bottom-item-left">
          <icon type="info" class="icon" /> 
          <text>{{ info.version }}</text>
        </view>
        <text class="bottom-item-right">[已是最新版本]</text>
      </view>
      <view class="bottom-item">
        <view class="bottom-item-left">
          <icon type="info" class="icon" />
          <text>{{ info.kf_phone }}</text>
        </view>
        <text class="bottom-item-right">[官方联系方式]</text>
      </view>
      <view class="bottom-item" @click="pathInfo('/pages/login/privacy')">
        <view class="bottom-item-left">
          <icon type="info" class="icon" />
          <text>隐私政策</text>
        </view>
        <text class="bottom-item-right">
          <icon type="info" class="icon" />
        </text>
      </view>  
    </view>
    <view v-if="info" class="bottom-title"> ICP备案号：{{ info.icp }} </view>
      
  </view>
</template>

<script setup>
// import tabIcon1 from ""
import { outAccount } from "@/apis/login.js"
import { indexInfo } from "@/apis/home.js"
import { ref } from "vue"
import { tabList, bottomInfo } from "./js/data.js"
import { onLoad, onShow } from "@dcloudio/uni-app"
import { getRegion } from "@/apis/school"
import { getAllSchool, getAllCategoryType, getAllVersion } from "@/apis/dict.js"
const show = ref(false)
const info = ref()
const actions = [
  {
    name: "课时数据",
    id: 1
  },
  {
    name: "教务数据",
    id: 2
  }
]
const dayType=ref('早上')

const getTimeOfDay=()=> {  
    const now = new Date();  
    const hours = now.getHours();  
  
    if (hours >= 6 && hours < 12) {  
        return "早上";  
    } else if (hours >= 12 && hours < 18) {  
        return "中午";  
    } else {  
        // 这里的晚上时段包括了深夜和凌晨  
        return "晚上";  
    }  
}  
const init = async () => {
  let { data } = await indexInfo({})
  info.value = data ? data : ""
  console.log(data)
}
const pathItem = (item) => {
  
  uni.navigateTo({
    url: item.link
  })
}
const pathInfo = (link) => {
  let detail = JSON.stringify(info.value)
  uni.setStorageSync("englishUserInfo", detail)
  uni.navigateTo({
    url: link
  })
}
const loginOut = () => {  
  uni.reLaunch({ 
    url: "/pages/login/login" 
  })

  outAccount().then((res) => {})
  uni.removeStorageSync("englishToken")
}
const onSelect = (item) => {
  //查看数据类型进行跳转

  show.value = false
  if (item.id === 1) {
    uni.navigateTo({
      url: "/pages/lessonData/lessonData"
    })
  } else {
    uni.navigateTo({
      url: "/pages/dataManagement/dataManagement"
    })
  }
  // showToast(item.name);
}
const initDict = async () => {
  try{
  	let dictMap = {
  	  allSchool: [],
  	  allCategoryType: [],
  	  allVersion: [],
  	  regionList: []
  	}
  	const allSchool = await getAllSchool()
  	const allCategoryType = await getAllCategoryType()
  	const allVersion = await getAllVersion()
  	const regionList = await getRegion()
  	if (allSchool.code === 1) { 
  	  dictMap.allSchool = allSchool.data || []
  	}
  	if (allCategoryType.code === 1) {
  	  dictMap.allCategoryType = allCategoryType.data || []
  	}
  	
  	if (allVersion.code === 1) {
  	  dictMap.allVersion = allVersion.data || []
  	}
  	if (regionList.code === 1) {
  	  dictMap.regionList = regionList.data || []
  	}
  	uni.setStorageSync("dictMap", dictMap)
  }catch(e){
  	//TODO handle the exception
	let dictMap = {
	  allSchool: [],
	  allCategoryType: [],
	  allVersion: [],
	  regionList: []
	}
	uni.setStorageSync("dictMap", dictMap)
  }
}

onLoad(() => {
  let token = uni.getStorageSync("englishToken")
  if (!token) {
    uni.reLaunch({ 
      url: "/pages/login/login" 
    })
    // 使用token
  } else {   
    initDict() 
  } 
}) 
onShow(() => {
  let token = uni.getStorageSync("englishToken")
  if (token) {
    init()
  }
  dayType.value=getTimeOfDay() 
})
</script>

<style lang="scss" scoped>
.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100vw;
  min-height: 100vh;
  padding-bottom: 120rpx;
}

.content-heard {
  position: relative;
  width: 100%;
  height: 382rpx;
  opacity: 1;
  background: rgba(109, 169, 237, 1);
  &::after {
    content: "";
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 20px;
    border-radius: 50% 50% 0 0;
    background: #fff;
    z-index: 3;
  }
}

.heard-item {
  display: flex;
  align-items: center;
  margin-top: 100rpx;
  width: 100%;
  padding: 0 36rpx;
  padding-right: 18rpx;
}

.user-image {
  width: 148rpx;
  height: 148rpx;
  margin-right: 10rpx;
  background: rgba(242, 242, 242, 1);
  border-radius: 50%;

  .user-image-box {
    width: 148rpx;
    height: 148rpx;
    border-radius: 50%;
  }
}

.user-name {
  display: flex;
  flex-direction: column;
  /** 文本1 */
  font-size: 31.54rpx;
  font-weight: 400;
  line-height: 45.67rpx;
  color: rgba(255, 255, 255, 1);

  .path-info {
    margin-top: 34rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 238.32rpx;
    height: 48rpx;
    border-radius: 17.52rpx;
    background: rgba(242, 242, 242, 1);
    border: 1.75rpx solid rgba(237, 237, 237, 1);
    /** 文本1 */
    font-size: 24rpx;
    font-weight: 400;
    letter-spacing: 0px;

    color: rgba(102, 102, 102, 1);
  }
}

.tab-list { 
  display: flex;
  flex-wrap: wrap; 
  justify-content: space-between;
  margin-top: 23rpx;
  width: 657rpx;
  // height: 899rpx; 
  opacity: 1;
  border-radius: 26rpx;
  background: rgba(255, 255, 255, 1);
  border: 1.75rpx solid rgba(226, 226, 226, 1);
  padding: 0 42rpx;
  padding-top: 37rpx;
}

.tab-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 26%;
  margin-bottom: 46rpx;

  .tab-item-image {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 105.14rpx;
    height: 105.14rpx;
    opacity: 1;
    border-radius: 29.79rpx;
    background: linear-gradient(
      138.37deg,
      rgba(61, 150, 253, 1) 0%,
      rgba(30, 109, 239, 1) 100%
    );
    box-shadow: 0px 5.26rpx 10.51rpx rgba(30, 109, 239, 0.16);

    .tab-url {
      width: 82rpx;
      height: 82rpx;
      object-fit: contain;
    }
  }

  text {
    margin-top: 10rpx;

    opacity: 1;
    font-size: 28rpx;
    font-weight: 400;
    line-height: 40rpx;
  }
}

.no-mg {
  margin-bottom: 6rpx;
}

.bottom {
  width: 657.13rpx;

  opacity: 1;
  margin-top: 16px;
}

.bottom-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 124rpx;
  padding: 0 36rpx;
  border-bottom: 1.75rpx solid rgba(230, 230, 230, 1);
}

.bottom-item-left {
  display: flex;

  align-items: center;
  color: rgba(166, 166, 166, 1);

  .icon {
    // width: 96rpx;
    // height: 96rpx;
    color: rgba(166, 166, 166, 1);
    margin-right: 16rpx;
  }

  text {
    font-size: 28.04rpx;
    font-weight: 400;

    line-height: 40.6rpx;
    color: rgba(51, 51, 51, 1);
  }
}

.bottom-item-right {
}

.bottom-title { 
  font-size: 28.04rpx;
  font-weight: 400; 
  letter-spacing: 0px;
  line-height: 40.6rpx;
  color: rgba(224, 222, 222, 1);
  text-align: center;
  vertical-align: top;
  margin-top: 46rpx;
}

.login-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 123rpx;
  right: 32rpx;
  width: 147.2rpx;
  height: 47.31rpx;
  border-radius: 17.52rpx;
  background: rgba(144, 191, 245, 1);

  text {
    font-size: 28.04rpx;
    line-height: 40.6rpx;
    color: rgba(255, 255, 255, 1);
  }

  image {
    margin-left: 16rpx;
    width: 36.8rpx;
    height: 35.05rpx;
    opacity: 1;
  }
}
</style>
